<template>
  <div class="top-main">
    <div class="top-photo-gallery">
      <photo-frame class="top-photo-item" id="top-1" :photo-frame-width="topWidth" 
        :photo-frame-height="topHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame class="top-photo-item" id="top-2" :photo-frame-width="topWidth" 
        :photo-frame-height="topHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame id="top-3" :photo-frame-width="topWidth" 
        :photo-frame-height="topHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
    </div>
    <div class="other-photo-gallery">
      <photo-frame class="other-photo-item" :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame class="other-photo-item" :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame class="other-photo-item" :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame class="other-photo-item" :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame class="other-photo-item" :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame class="other-photo-item" :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
      <photo-frame :photo-frame-width="otherWidth" 
        :photo-frame-height="otherHeight" 
        photo-frame-src="/static/images/demo_photo.jpg"
        photo-frame-avatar="/static/images/demo_avatar.jpg"></photo-frame>
    </div>
  <div>
</template>

<script type="text/babel">
  import PhotoFrame from './widgets/PhotoFrame'
  export default {
    data () {
      return {
        topWidth: 230,
        topHeight: 230,
        otherWidth: 115,
        otherHeight: 130
      }
    },
    ready: function () {
    },
    components: {
      PhotoFrame
    },
    events: {
      'on-view-click': function (component, event) {
        this.$router.go({
          name: 'preview',
          replace: true
        })
      }
    }
  }
</script>

<style scoped>
.top-main {
}

.top-photo-gallery {
  display: inline-block;
  margin-top: 160px;
  margin-left: 84px;
}

.top-photo-item {
  margin-right: 30px;
}

.other-photo-gallery {
  display: inline-block;
  margin-top: 40px;
}

.other-photo-item {
  margin-right: 16px;
}
</style>